<template>
  <ele-modal
    v-model="visible"
    :width="600"
    title="打印商品标签"
    class="select-product"
    destroy-on-close
    :show-close="false"
  >
    <template #header>
      <div class="flex-ba">
        <div>打印商品标签</div>
        <div class="flex-a">
          <el-switch
            v-model="date"
            class="mx-15px"
            inline-prompt
            active-text="打印日期"
            inactive-text="不打印日期"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
          <div class="w-200px">
            <el-select v-model="xpyun_ids" clearable multiple placeholder="请选择打印机">
              <el-option v-for="item in printerList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="flex-ba">
        <div class="flex-a">
          <div class="w-100px mr-5px">
            <el-input v-model="printNum" :input-style="{ textAlign: 'center' }" placeholder="打印数量" oninput="value=value.replace(/[^\d]/g, '')" clearable />
          </div>
          <el-button type="primary" plain @click="batchNum">批量设置</el-button>
        </div>
        <div>
          <el-button @click="visible = false">
            取消
          </el-button>
          <el-button type="primary" :loading="loading" @click="save">
            批量打印
          </el-button>
        </div>
      </div>
    </template>
    <!-- 表格 -->

    <el-table :data="datasource" stripe max-height="55vh">
      <el-table-column label="序" width="50" type="index" />
      <el-table-column label="商品名称" prop="product_name" show-overflow-tooltip />
      <el-table-column label="商品编码" width="130" prop="product_code" align="center" />
      <el-table-column label="打印数量" width="130" prop="print_num" align="center">
        <template #default="{ row }">
          <el-input v-model="row.print_num" size="small" :input-style="{ textAlign: 'center' }" oninput="value=value.replace(/[^\d]/g, '')" clearable />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="75" column-key="action" align="right">
        <template #default="{ row }">
          <el-link
            type="primary"
            underline="never"
            :disabled="row.print_num > 0 ? false : true"
            @click="saveRow(row)"
          >
            打印
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </ele-modal>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  warehouseId: Number,
  createTime: Number,
})

const datasource = ref([])

const xpyun_ids = ref([])
const printerList = ref([])

const visible = defineModel()

const loading = ref(false)

const printNum = ref('')
const date = ref(false)

function batchNum() {
  datasource.value.forEach((v) => {
    v.print_num = printNum.value
  })
}

function getPrinterList() {
  utils.get('/xpyun/wIdToXpyunList', { warehouse_id: props.warehouseId }).then((res) => {
    printerList.value = res.data
    if (printerList.value.length) {
      xpyun_ids.value = [printerList.value[0].id]
    }
  })
}

function save() {
  if (!xpyun_ids.value.length) {
    return utils.message.error('请选择打印机')
  }
  loading.value = true
  const product = datasource.value.filter(d => d.print_num > 0).map(v => ({ id: v.product_id, num: v.print_num }))
  if (!product.length) {
    return utils.message.error('请填写打印数量')
  }
  utils.post('/xpyun/printProduct', { xpyun_ids: xpyun_ids.value, product, date: date.value ? utils.formatDate(props.createTime, 'YYYY-MM-DD') : '' })
    .then((res) => {
      utils.message(res.msg, res.success)
      if (res.success) {
        visible.value = false
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function saveRow(row) {
  if (!xpyun_ids.value.length) {
    return utils.message.error('请选择打印机')
  }
  if (!Number(row.print_num)) {
    return utils.message.error('请填写打印数量')
  }
  utils.post('/xpyun/printProduct', { xpyun_ids: xpyun_ids.value, date: date.value ? utils.formatDate(props.createTime, 'YYYY-MM-DD') : '', product: [{ id: row.product_id, num: row.print_num }] })
    .then((res) => {
      utils.message(res.msg, res.success)
    })
}

watch(() => visible.value, (newVal) => {
  if (newVal) {
    getPrinterList()

    datasource.value = props.data.map((v) => {
      return {
        ...v,
        print_num: 1,
      }
    })
  }
})
</script>

<style lang="scss">

</style>
